<template>
<div class="app-container bg-white">
    <!-- 页面内容 -->
    <div class="page-body">
        <div>
            <el-button size="mini" type="success" icon="el-icon-document-add" @click="addOption()" v-if="roleBtns.includes('sys:menu:add') || $store.getters.isAdmin">新建菜单</el-button>
        </div>
      <!-- 数据table -->
      <el-table class="margin_top_20" :data="pageData" stripe :header-cell-style="tableHeaderStyle" v-loading="loading" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="label" label="名称"></el-table-column>
        <el-table-column prop="img" label="图标">
            <template slot-scope="scope">
                <img :src="baseImgUrl + scope.row.img" v-if="scope.row.menuType == 'M' && scope.row.img" width="30" height="30" />
                <template v-if="scope.row.menuType != 'M'">
                    <i :class="scope.row.icon"></i>
                </template>
                <!-- <el-tag type="success" size="small" v-if="scope.row.menuType == 'C'">菜单</el-tag> -->
                <!-- <el-tag type="info" size="small" v-if="scope.row.menuType == 'F'">按钮</el-tag> -->
            </template>
        </el-table-column>
        <el-table-column prop="type" label="类型">
            <template slot-scope="scope">
                <el-tag size="small" v-if="scope.row.type == 0">平台</el-tag>
                <el-tag size="small" type="success" v-if="scope.row.type == 1">商户</el-tag>
                <el-tag size="small" type="warning" v-if="scope.row.type == 2">店铺</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="menuType" label="菜单类型">
            <template slot-scope="scope">
                <el-tag size="small" v-if="scope.row.menuType == 'M'">目录</el-tag>
                <el-tag size="small" type="success" v-if="scope.row.menuType == 'C'">菜单</el-tag>
                <el-tag size="small" type="info" v-if="scope.row.menuType == 'F'">按钮</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="num" label="排序号"></el-table-column>
        <el-table-column prop="routerPath" label="菜单路由"></el-table-column>
        <el-table-column label="操作" width="320">
          <template slot-scope="scope">
            <button class="my-btn my-btn--mini my-btn--primary plain" @click="showOption(scope.row)" v-if="roleBtns.includes('sys:menu:show') || $store.getters.isAdmin">查看</button>
            <button class="my-btn my-btn--mini my-btn--primary plain" @click="editOption(scope.row)" v-if="roleBtns.includes('sys:menu:update') || $store.getters.isAdmin">编辑</button>
            <button class="my-btn my-btn--mini my-btn--primary plain" @click="addChildOption(scope)" v-if="roleBtns.includes('sys:menu:addChild') || $store.getters.isAdmin">添加子级</button>
            <button class="my-btn my-btn--mini my-btn--danger plain" @click="deleteOption(scope.row)" v-if="roleBtns.includes('sys:menu:remove') || $store.getters.isAdmin">删除</button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  <el-dialog :title="mode + title" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="isShowDialog">
    <el-form :model="menuForm" ref="menuFormRef" label-width="150px" :disabled="isShowerMode">
        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="menuForm.type" :disabled="isEditorMode || isAppendChild">
            <el-radio label="0">平台</el-radio>
            <el-radio label="1">商户</el-radio>
            <el-radio label="2">店铺</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单类型" prop="menuType">
            <el-radio-group v-model="menuForm.menuType" :disabled="isEditorMode">
                <el-radio :label="type.value" v-for="(type, index) of menuTypeList" :key="'menutype' + index">{{type.name}}</el-radio>
            </el-radio-group>
        </el-form-item>
        <template v-if="menuForm.menuType != 'M'">
            <el-form-item label="上级菜单" prop="parent">
                <el-cascader class="input_item" placeholder="请选择上级菜单" v-model="menuForm.parent" :options="pageData" :disabled="false" clearable :props="cascaderProps"></el-cascader>
            </el-form-item>
        </template>
        <el-form-item :label="title + '标题'" prop="name">
            <el-input class="input_item" v-model="menuForm.name" :placeholder="'请输入' + title + '标题'" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item :label="title + '链接'" prop="path">
            <el-input class="input_item" v-model="menuForm.path" :placeholder="'请输入' + title + '链接'" maxlength="100"></el-input>
        </el-form-item>
        <template v-if="menuForm.menuType == 'C'">
            <el-form-item :label="title + '名称'" prop="title">
                <el-input class="input_item" v-model="menuForm.title" :placeholder="'请输入' + title + '名称'" maxlength="100"></el-input>
            </el-form-item>
            <el-form-item :label="title + '页面'" prop="component">
                <el-input class="input_item" v-model="menuForm.component" :placeholder="'请输入' + title + '页面'" maxlength="100"></el-input>
            </el-form-item>
            <el-form-item label="重定向路由" prop="redirect">
                <el-input class="input_item" v-model="menuForm.redirect" placeholder="请输入重定向路由" maxlength="100"></el-input>
            </el-form-item>
            <el-form-item :label="title + '图标'" prop="icon">
                <el-input class="input_item" v-model="menuForm.icon" :placeholder="'请输入' + title + '图标'" maxlength="100"></el-input>
            </el-form-item>
        </template>
        <template v-if="menuForm.menuType == 'M'">
            <el-form-item :label="title + '图片地址'" prop="imgUrl">
                <el-input class="input_item" v-model="menuForm.imgUrl" :placeholder="'请输入' + title + '图标'" maxlength="100"></el-input>
            </el-form-item>
            <el-form-item label="菜单归属" prop="businessType">
                <el-radio-group v-model="menuForm.businessType">
                    <el-radio label="1">运营系统</el-radio>
                    <el-radio label="2">业务系统</el-radio>
                </el-radio-group>
            </el-form-item>
        </template>
        <el-form-item label="权限字符" prop="perms">
                <el-input class="input_item" v-model="menuForm.perms" placeholder="请输入权限字符" maxlength="127"></el-input>
            </el-form-item>
        <el-form-item label="序列号" prop="index">
            <el-input-number class="input_item" v-model="menuForm.index" placeholder="请输入序列号" controls-position="right" :min="0" :max="127" :step="1" :precision="0" @keydown.native="inputNoneNumberUnpass"></el-input-number>
        </el-form-item>
        <el-form-item label="是否为链接" prop="isFrame">
            <el-switch v-model="menuForm.isFrame"></el-switch>
        </el-form-item>
        <template v-if="menuForm.menuType == 'C'">
            <el-form-item label="是否隐藏" prop="hidden">
                <el-switch v-model="menuForm.hidden"></el-switch>
            </el-form-item>
            <el-form-item label="关联菜单" prop="activeMenu">
                <el-input class="input_item" v-model="menuForm.activeMenu" placeholder="请输入关联菜单" maxlength="100"></el-input>
            </el-form-item>
            <!-- <el-form-item label="是否鉴权" prop="isCheckToken">
                <el-switch v-model="menuForm.isCheckToken"></el-switch>
            </el-form-item> -->
        </template>
        <el-form-item :label="title + '描述'" prop="remark">
            <el-input class="input_item" v-model="menuForm.remark" type="textarea" :rows="2" :placeholder="'请输入' + title + '描述'" maxlength="200"></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="cancelSubmit()">取 消</el-button>
        <el-button :loading="submitLoading" type="primary" @click="submitForm()">确 定</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
import { mapGetters } from 'vuex';
import Setting from '@/settings';
import { GetRoutersTreeData, AddUserRouterItem, UpdateUserRouterItem, GetRoutersMenu, RemoveRoutersMenu } from '@/views/user-management/services/index';
export default {
    name: 'UserMenu',
    data() {
        return {
            baseImgUrl: process.env.VUE_APP_FILE_URL + '/',
            cascaderProps: {
                value: 'id',
                label: 'label',
                checkStrictly: true
            },
            menuTypeList: Setting.menuTypeList,
            menuForm: {
                type: null,
                menuType: 'C',
                parent: [],
                name: '',
                path: '',
                title: '',
                component: '',
                redirect: '',
                isFrame: false,
                icon: '',
                imgUrl: '',
                businessType: null,
                perms: '',
                index: 0,
                hidden: false,
                activeMenu: '',
                isCheckToken: false,
                remark: '',
                proId: JSON.parse(this.$store.getters.userInfo).proId
            },

            menuNodeId: '', // 存储编辑状态下的菜单id
            isEditorMode: false, // 是否为编辑模式
            isShowerMode: false, // 是否为查看模式

            tableHeaderStyle: Setting.tableHeaderStyle,
            pageData: [],
            loading: false,
            submitLoading: false,
            isShowDialog: false,

            isAppendChild: false
        }
    },
    computed: {
        title() {
            const finder = this.menuTypeList.find(menu => menu.value == this.menuForm.menuType);
            return finder.name;
        },
        mode() {
            if (this.isShowerMode) {
                return '查看';
            }
            if (this.isEditorMode) {
                return '编辑';
            }
            return '新建';
        },
        ...mapGetters([
            'roleBtns'
        ])
    },
    methods: {
        // 获取列表数据
        getPageDataList() {
            this.loading = true;
            GetRoutersTreeData()
            .then(data => {
                if (data.code == 200) {
                    this.pageData = data.data;
                }
                this.loading = false;
            })
            .catch(error => {
                this.loading = false;
            })
        },

        // 新增菜单
        addOption() {
            this.isEditorMode = false;
            this.isShowerMode = false;
            this.isShowDialog = true;
        },

        // 查看菜单
        async showOption(data) {
            this.isEditorMode = false;
            this.isShowerMode = true;
            this.menuNodeId = data.id;
            const res = await GetRoutersMenu({ id: data.id });
            // 根据不同的菜单类型设置对应的数据
            switch (data.menuType) {
                case 'M':
                    this.menuForm.type = res.data.type.toString();
                    this.menuForm.name = res.data.menuName;
                    this.menuForm.path = res.data.routerPath;
                    this.menuForm.menuType = 'M';
                    this.menuForm.hidden = res.data.visible == '0' ? false : true;
                    this.menuForm.imgUrl = res.data.menuImg;
                    this.menuForm.businessType = res.data.businessType;
                    this.menuForm.redirect = res.data.redirect;
                    this.menuForm.index = res.data.num;
                    this.menuForm.perms = res.data.perms;
                    this.menuForm.remark = res.data.remark;
                    this.menuForm.isFrame = res.data.isFrame == '1' ? false : true;
                    this.menuForm.proId = res.data.proId;

                    this.isShowDialog = true;
                    break;
                case 'C':
                    this.menuForm.type = res.data.type.toString();
                    this.menuForm.name = res.data.menuName;
                    this.menuForm.title = res.data.title;
                    this.menuForm.parent = this.findParentNodeId(res.data.parentId, this.pageData),
                    this.menuForm.path = res.data.routerPath;
                    this.menuForm.component = res.data.component;
                    this.menuForm.menuType = 'C';
                    this.menuForm.isFrame = res.data.isFrame == '1' ? false : true;
                    this.menuForm.hidden = res.data.visible == '0' ? false : true;
                    this.menuForm.icon = res.data.icon;
                    this.menuForm.activeMenu = res.data.activeMenu;
                    this.menuForm.redirect = res.data.redirect;
                    this.menuForm.index = res.data.num;
                    this.menuForm.perms = res.data.perms;
                    this.menuForm.remark = res.data.remark;
                    this.menuForm.proId = res.data.proId;

                    this.isShowDialog = true;
                    break;
                case 'F':
                    this.menuForm.type = res.data.type.toString();
                    this.menuForm.name = res.data.menuName;
                    this.menuForm.parent = this.findParentNodeId(res.data.parentId, this.pageData),
                    this.menuForm.path = res.data.routerPath;
                    this.menuForm.component = res.data.component;
                    this.menuForm.menuType = 'F';
                    this.menuForm.isFrame = res.data.isFrame == '1' ? false : true;
                    this.menuForm.hidden = res.data.visible == '0' ? false : true;
                    this.menuForm.icon = res.data.icon;
                    this.menuForm.activeMenu = res.data.activeMenu;
                    this.menuForm.redirect = res.data.redirect;
                    this.menuForm.index = res.data.num;
                    this.menuForm.perms = res.data.perms;
                    this.menuForm.remark = res.data.remark;
                    this.menuForm.proId = res.data.proId;

                    this.isShowDialog = true;
                    break;
                default:
                    break;
            }
        },

        // 编辑菜单节点
        async editOption(data) {
            this.isShowerMode = false;
            this.isEditorMode = true;
            this.menuNodeId = data.id;
            const res = await GetRoutersMenu({ id: data.id });
            // 根据不同的菜单类型设置对应的数据
            switch (data.menuType) {
                case 'M':
                    this.menuForm.type = res.data.type.toString();
                    this.menuForm.name = res.data.menuName;
                    this.menuForm.path = res.data.routerPath;
                    this.menuForm.menuType = 'M';
                    this.menuForm.hidden = res.data.visible == '0' ? false : true;
                    this.menuForm.imgUrl = res.data.menuImg;
                    this.menuForm.businessType = res.data.businessType;
                    this.menuForm.redirect = res.data.redirect;
                    this.menuForm.index = res.data.num;
                    this.menuForm.perms = res.data.perms;
                    this.menuForm.remark = res.data.remark;
                    this.menuForm.isFrame = res.data.isFrame == '1' ? false : true;
                    this.menuForm.proId = res.data.proId;

                    this.isShowDialog = true;
                    break;
                case 'C':
                    this.menuForm.type = res.data.type.toString();
                    this.menuForm.name = res.data.menuName;
                    this.menuForm.title = res.data.title;
                    this.menuForm.parent = this.findParentNodeId(res.data.parentId, this.pageData),
                    this.menuForm.path = res.data.routerPath;
                    this.menuForm.component = res.data.component;
                    this.menuForm.menuType = 'C';
                    this.menuForm.isFrame = res.data.isFrame == '1' ? false : true;
                    this.menuForm.hidden = res.data.visible == '0' ? false : true;
                    this.menuForm.icon = res.data.icon;
                    this.menuForm.activeMenu = res.data.activeMenu;
                    this.menuForm.redirect = res.data.redirect;
                    this.menuForm.index = res.data.num;
                    this.menuForm.perms = res.data.perms;
                    this.menuForm.remark = res.data.remark;
                    this.menuForm.proId = res.data.proId;

                    this.isShowDialog = true;
                    break;
                case 'F':
                    this.menuForm.type = res.data.type.toString();
                    this.menuForm.name = res.data.menuName;
                    this.menuForm.parent = this.findParentNodeId(res.data.parentId, this.pageData),
                    this.menuForm.path = res.data.routerPath;
                    this.menuForm.component = res.data.component;
                    this.menuForm.menuType = 'F';
                    this.menuForm.isFrame = res.data.isFrame == '1' ? false : true;
                    this.menuForm.hidden = res.data.visible == '0' ? false : true;
                    this.menuForm.icon = res.data.icon;
                    this.menuForm.activeMenu = res.data.activeMenu;
                    this.menuForm.redirect = res.data.redirect;
                    this.menuForm.index = res.data.num;
                    this.menuForm.perms = res.data.perms;
                    this.menuForm.remark = res.data.remark;
                    this.menuForm.proId = res.data.proId;

                    this.isShowDialog = true;
                    break;
                default:
                    break;
            }
        },

        // 删除菜单节点
        deleteOption(data) {
            this.$confirm('此操作将删除该菜单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                beforeClose: (action, instance, done) => {
                    if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        RemoveRoutersMenu({ id: data.id })
                        .then(data => {
                            instance.confirmButtonLoading = false;
                            if (data.code == 200) {
                                done();
                                this.$message.success('删除成功!');
                                this.getPageDataList();
                            } else {
                                this.$message.error('删除失败!');
                            }
                        })
                        .catch(error => {
                            instance.confirmButtonLoading = false;
                        })
                    } else {
                        done();
                    }
                }
            })
        },

        // 添加子节点
        addChildOption(scope) {
            // 根据当前id获取所有上级的id
            this.isShowerMode = false;
            this.isEditorMode = false;
            this.menuForm.parent = this.findParentNodeId(scope.row.id, this.pageData);
            this.menuForm.type = scope.row.type.toString();
            this.isShowDialog = true;

            this.isAppendChild = true;
        },

        // 取消提交
        cancelSubmit() {
            this.isShowDialog = false;
            this.isAppendChild = false;
            this.resetForm();
        },

        // 表单提交
        submitForm() {
            if (this.isShowerMode) {
                setTimeout(() => {
                    this.isShowerMode = false;
                }, 300);
                this.cancelSubmit();
                return;
            }
            this.$refs.menuFormRef.validate((valid) => {
                if (valid) {
                    if (!this.validForm()) return;
                    this.submitLoading = true;
                    switch (this.menuForm.menuType) {
                        case 'M':
                            if (this.isEditorMode) {
                                UpdateUserRouterItem({
                                    ...this.formatFormForM(),
                                    id: this.menuNodeId
                                })
                                .then(data => {
                                    if (data.code == 200) {
                                        this.$message.success('修改成功!');
                                        this.isShowDialog = false;
                                        this.resetForm();
                                        this.getPageDataList();
                                    } else {
                                        this.$message.error('修改失败!');
                                    }
                                    this.submitLoading = false;
                                    this.isEditorMode = false;
                                })
                                .catch(() => {
                                    this.submitLoading = false;
                                })
                            } else {
                                AddUserRouterItem(this.formatFormForM())
                                .then(data => {
                                    if (data.code == 200) {
                                        this.$message.success('新建成功!');
                                        this.isShowDialog = false;
                                        this.resetForm();
                                        this.getPageDataList();
                                    } else {
                                        this.$message.error('新建失败!');
                                    }
                                    this.submitLoading = false;
                                })
                                .catch(() => {
                                    this.submitLoading = false;
                                })
                            }
                            break;
                        case 'C':
                            if (this.isEditorMode) {
                                UpdateUserRouterItem({
                                    ...this.formatFormForC(),
                                    id: this.menuNodeId
                                })
                                .then(data => {
                                    if (data.code == 200) {
                                        this.$message.success('修改成功!');
                                        this.isShowDialog = false;
                                        this.resetForm();
                                        this.getPageDataList();
                                    } else {
                                        this.$message.error('修改失败!');
                                    }
                                    this.submitLoading = false;
                                    this.isEditorMode = false;
                                })
                                .catch(() => {
                                    this.submitLoading = false;
                                })
                            } else {
                                AddUserRouterItem(this.formatFormForC())
                                .then(data => {
                                    if (data.code == 200) {
                                        this.$message.success('新建成功!');
                                        this.isShowDialog = false;
                                        this.resetForm();
                                        this.getPageDataList();
                                    } else {
                                        this.$message.error('新建失败!');
                                    }
                                    this.submitLoading = false;
                                })
                                .catch(() => {
                                    this.submitLoading = false;
                                })
                            }
                            break;
                        case 'F':
                            if (this.isEditorMode) {
                                UpdateUserRouterItem({
                                    ...this.formatFormForF(),
                                    id: this.menuNodeId
                                })
                                .then(data => {
                                    if (data.code == 200) {
                                        this.$message.success('修改成功!');
                                        this.isShowDialog = false;
                                        this.resetForm();
                                        this.getPageDataList();
                                    } else {
                                        this.$message.error('修改失败!');
                                    }
                                    this.submitLoading = false;
                                    this.isEditorMode = false;
                                })
                                .catch(() => {
                                    this.submitLoading = false;
                                })
                            } else {
                                AddUserRouterItem(this.formatFormForF())
                                .then(data => {
                                    if (data.code == 200) {
                                        this.$message.success('新建成功!');
                                        this.isShowDialog = false;
                                        this.resetForm();
                                        this.getPageDataList();
                                    } else {
                                        this.$message.error('新建失败!');
                                    }
                                    this.submitLoading = false;
                                })
                                .catch(() => {
                                    this.submitLoading = false;
                                })
                            }
                            break;
                    }
                    
                }
            });
        },

        // 表单重置
        resetForm() {
            this.$refs.menuFormRef.resetFields();
            this.menuForm = {
                type: null,
                menuType: 'C',
                parent: [],
                name: '',
                path: '',
                title: '',
                component: '',
                redirect: '',
                isFrame: false,
                icon: '',
                imgUrl: '',
                businessType: null,
                perms: '',
                index: 0,
                hidden: false,
                activeMenu: '',
                isCheckToken: false,
                remark: '',
                proId: JSON.parse(this.$store.getters.userInfo).proId
            };
            this.isAppendChild = false;
        },

        validForm() {
            if (!this.menuForm.type) {
                this.$message.warning('请选择类型!');
                return false;
            }
            if (this.menuForm.menuType != 'M' && (!this.menuForm.parent || !this.menuForm.parent.length)) {
                this.$message.warning('请选择上级菜单!');
                return false;
            }
            if (!this.menuForm.name) {
                this.$message.warning('请输入标题!');
                return false;
            }
            if (this.menuForm.menuType == 'M' && !this.menuForm.businessType) {
                this.$message.warning('请选择菜单归属!');
                return false;
            }
            if (!this.menuForm.perms) {
                this.$message.warning('请输入权限字符!');
                return false;
            }
            if (!Number(this.menuForm.index)) {
                this.$message.warning('请输入序列号！');
                return false;
            }
            return true;
        },

        findParentNodeId(id, dataList) {
            var idsList = [];
            var forFunction = (list, id) => {
                for (var i = 0; i < list.length; i++) {
                    var item = list[i];
                    if (item.id == id) {
                        idsList.unshift(item.id);
                        forFunction(dataList, item.parentId);
                        break;
                    } else {
                        if (item.children) {
                            forFunction(item.children, id);
                        }
                    }
                }
            }
            forFunction(dataList, id);
            return idsList;
        },

        // 整合表单数据 - 目录
        formatFormForM() {
            return {
                type: this.menuForm.type,
                menuName: this.menuForm.name, // 菜单名称	
                parentId: '0', // 上级菜单Id 顶级菜单0
                routerPath: this.menuForm.path, // 路由地址
                menuType: this.menuForm.menuType, // 菜单类型 M目录 C菜单 F按钮
                visible: this.menuForm.hidden ? 1 : 0, // 显示转台 0显示 1隐藏
                menuImg: this.menuForm.imgUrl, // 图片地址
                businessType: this.menuForm.businessType, // 运营 or 业务
                redirect: this.menuForm.redirect,
                perms: this.menuForm.perms,
                num: this.menuForm.index,
                remark: this.menuForm.remark, // 备注
                isFrame: this.menuForm.isFrame ? 0 : 1, // 是否外链 0是 1否 是外链routerPath 必须以http(s)://开头
                status: 0, // 是否启用 0启用 1禁用
                proId: this.menuForm.proId
            }
        },

        // 整合表单数据 - 菜单
        formatFormForC() {
            return {
                type: this.menuForm.type,
                menuName: this.menuForm.name, // 菜单名称
                title: this.menuForm.title,
                parentId: this.menuForm.parent[this.menuForm.parent.length - 1], // 上级菜单Id 顶级菜单0
                routerPath: this.menuForm.path, // 路由地址
                component: this.menuForm.component, // 组件地址
                isFrame: this.menuForm.isFrame ? 0 : 1, // 是否外链 0是 1否 是外链routerPath 必须以http(s)://开头
                isCache: 1, // 是否缓存 0是 1否
                businessType: 1, // 默认为运营系统
                menuType: this.menuForm.menuType, // 菜单类型 M目录 C菜单 F按钮
                visible: this.menuForm.hidden ? 1 : 0, // 显示转台 0显示 1隐藏
                redirect: this.menuForm.redirect,
                perms: this.menuForm.perms, // 权限字符
                num: this.menuForm.index,
                status: 0, // 是否启用 0启用 1禁用
                icon: this.menuForm.icon, // 图片地址
                remark: this.menuForm.remark, // 备注
                activeMenu: this.menuForm.activeMenu, // 对应高亮菜单
                proId: this.menuForm.proId
            }
        },

        // 整合表单数据 - 按钮
        formatFormForF() {
            return {
                type: this.menuForm.type,
                menuName: this.menuForm.name, // 菜单名称	
                parentId: this.menuForm.parent[this.menuForm.parent.length - 1], // 上级菜单Id 顶级菜单0
                routerPath: this.menuForm.path, // 路由地址
                component: this.menuForm.component, // 组件地址
                isFrame: this.menuForm.isFrame ? 0 : 1, // 是否外链 0是 1否 是外链routerPath 必须以http(s)://开头
                isCache: 1, // 是否缓存 0是 1否
                businessType: 1, // 默认为运营系统
                menuType: this.menuForm.menuType, // 菜单类型 M目录 C菜单 F按钮
                visible: this.menuForm.hidden ? 1 : 0, // 显示转台 0显示 1隐藏
                perms: this.menuForm.perms, // 权限字符
                num: this.menuForm.index,
                status: 0, // 是否启用 0启用 1禁用
                icon: this.menuForm.icon, // 图片地址
                remark: this.menuForm.remark, // 备注
                activeMenu: this.menuForm.activeMenu, // 对应高亮菜单
                proId: this.menuForm.proId
            }
        }
    },
    created() {
        this.getPageDataList();
    }
}
</script>

<style lang="scss" scoped>
.input_item {
  width: 80%;
}

::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
</style>
